import 'package:edu/pages/profile/security/credentail_setting/credential_setting_page_logic.dart';
import 'package:edu/utils/app_router.dart';
import 'package:flutter/material.dart';
import 'package:edu/constants/app_strings.dart';
import 'package:edu/pages/profile/security/security_setting/security_setting_page_logic.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

class SecuritySettingPage extends StatefulWidget {
  const SecuritySettingPage({super.key});

  @override
  State<SecuritySettingPage> createState() => _SecuritySettingPageState();
}

class _SecuritySettingPageState extends State<SecuritySettingPage> {
  @override
  void initState() {
    super.initState();
    context.read<SecuritySettingPageLogic>().init();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text(AppStrings.accountSecurity)),
      body: ScrollConfiguration(
        behavior: const ScrollBehavior().copyWith(scrollbars: false),
        child: _buildMainListView(context),
      ),
    );
  }

  Widget _buildMainListView(BuildContext context) {
    return Container(
      color: Theme.of(context).colorScheme.surface,
      child: ListView(
        children: [
          const SizedBox(height: 15),
          // 手机号
          _buildInfoTextCell(
            context: context,
            title: AppStrings.phone,
            onTap: () {
              context.pushNamed(
                AppRouter.kCredentialSetting,
                queryParameters: {
                  'credential_type':
                      CredentialSettingPageLogic.kCredentialPhone,
                },
              );
            },
            selector: (logic) => logic.phoneNumber,
          ),
          // 邮箱
          _buildInfoTextCell(
            context: context,
            title: AppStrings.email,
            onTap: () {
              context.pushNamed(
                AppRouter.kCredentialSetting,
                queryParameters: {
                  'credential_type':
                      CredentialSettingPageLogic.kCredentialEmail,
                },
              );
            },
            selector: (logic) => logic.email,
          ),
          // 第三方账号
          _buildInfoTextCell(
            context: context,
            title: AppStrings.thirdAccount,
            onTap: () {
              context.pushNamed(AppRouter.kThirdAuthAccount);
            },
            selector: (logic) => null,
          ),
          // 密码设置
          _buildInfoTextCell(
            context: context,
            title: AppStrings.passwordSetting,
            onTap: () {
              context.pushNamed(AppRouter.kPasswordSetting);
            },
            selector: (logic) => null,
          ),
          // 身份认证 or 实名认证
          _buildInfoTextCell(
            context: context,
            title: AppStrings.identityVerification,
            onTap: () {
              context.pushNamed(AppRouter.kIdentityVerification);
            },
            selector: (logic) => AppStrings.notVerify,
          ),
          // 账号注销
          _buildInfoTextCell(
            context: context,
            title: AppStrings.accountCancellation,
            onTap: () {
              context.pushNamed(AppRouter.kAccountCancellation);
            },
            selector: (logic) => AppStrings.cancellationTip,
          ),
        ],
      ),
    );
  }

  Widget _buildInfoTextCell({
    required BuildContext context,
    required String title,
    required VoidCallback onTap,
    required String? Function(SecuritySettingPageLogic logic) selector,
  }) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 60,
        padding: const EdgeInsets.symmetric(horizontal: 15),
        color: Theme.of(context).scaffoldBackgroundColor,
        child: Row(
          children: [
            Text(title, style: Theme.of(context).textTheme.titleMedium),
            const SizedBox(width: 10),
            Expanded(
              child: Selector<SecuritySettingPageLogic, String?>(
                selector: (context, logic) => selector(logic),
                builder: (context, v, child) {
                  final style = Theme.of(
                    context,
                  ).textTheme.bodyMedium?.copyWith(color: Colors.grey);
                  return Text(
                    v ?? '',
                    style: style,
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                    textAlign: TextAlign.right,
                  );
                },
              ),
            ),
            const SizedBox(width: 5),
            const Icon(Icons.arrow_forward_ios, size: 15, color: Colors.grey),
          ],
        ),
      ),
    );
  }
}
